<template>
  <router-layout>
    <div class="container van-hairline--top">
      <van-tabs class="van-tab-box" v-model="active" color="#01A0EF" @change="clickChange">
        <van-tab v-for="(int, index) in sourceList" :key="index" :title="int.definition">
          <Nodata v-if="!dataList.length"></Nodata>
          <div v-else class="content-box">
            <van-list v-model="loading" :finished="finished" @load="onLoad">
              <van-cell v-for="(item, index) in dataList" :key="index">
                <div class="post-content">
                  <van-row type="flex" align="center">
                    <van-col>
                      <div class="post-box">
                        <img :src="item.file_path" width="100%" alt>
                      </div>
                    </van-col>
                    <van-col>
                      <div class="post-text">
                        <p
                          class="title-text one-txt-cut"
                        >{{int.name =='community'?item.article_title:item.proposal_title}}</p>
                      </div>
                    </van-col>
                  </van-row>
                </div>
                <div class="give-box">
                  <van-row type="flex">
                    <van-col>
                      <i class="iconfont icon-dianzan1"></i>
                    </van-col>
                    <van-col>
                      <van-row type="flex" gutter="8" class="avtar-box">
                        <div v-for="(it, index) in item.avatarList" :key="index">
                          <div class="img-box">
                            <img :src="it.src" width="100%" height="100%" alt>
                            <p>{{ it.name }}</p>
                          </div>
                        </div>
                      </van-row>
                    </van-col>
                  </van-row>
                </div>
              </van-cell>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </router-layout>
</template>

<script>
import { article_listLikeMy } from "@/api/article";
import { proposal_listLikeMy } from "@/api/proposal";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件

export default {
  name: "fabulousMyModule",
  components: { Nodata },
  data() {
    return {
      isNoData: false,
      loading: false,
      finished: false,
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId")
      },
      dataList: [],
      avatarList: [],
      active: 0,
      sourceList: [
        {
          name: "community",
          definition: "论坛"
        },
        {
          name: "proposal",
          definition: "合理化建议"
        }
      ]
    };
  },
  methods: {
    clickChange(index) {
      this.active = index;
      if (index == 0) {
        this.initList();
      }
      if (index == 1) {
        this.fetchList();
      }
    },
    //获取数据
    async initList() {
      let query = Object.assign(this.listQuery);
      let res = await article_listLikeMy(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows;
        this.total = result.data.results;

        for (let i = 0; i < result.data.rows.length; i++) {
          this.$set(result.data.rows[i], "avatarList", []);
          let fmtVal = this.fmtList(
            result.data.rows[i].portraits,
            result.data.rows[i].like_names
          );
          result.data.rows[i].avatarList = fmtVal;
        }
      }
      this.loading = false;
      if (result.data.results <= this.dataList.length) {
        this.finished = true;
      }
    },
    fmtList(val1, val2) {
      let cache = [];
      let res1 = val1.split(",");
      let res2 = val2.split(",");
      for (let i = 0; i < res1.length; i++) {
        cache[i] = {
          src: res1[i],
          name: res2[i]
        };
      }
      return cache;
    },
    //获取数据
    async fetchList() {
      let query = Object.assign(this.listQuery);
      let res = await proposal_listLikeMy(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows;
        for (let i = 0; i < result.data.rows.length; i++) {
          this.$set(result.data.rows[i], "avatarList", []);
          let fmtVal = this.fmtList(
            result.data.rows[i].portraits,
            result.data.rows[i].like_names
          );
          result.data.rows[i].avatarList = fmtVal;
        }
      }
      this.loading = false;
      if (result.data.results <= result.data.rows.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.active == 1 ? this.fetchList() : this.initList();
      }, 1000);
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
@import "./../community/fabulousMy";
</style>

